<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.fu{
				width: 40%;
				background-color: #717171;
			}
			h1{
				margin: 15px;
				line-height: 200%;
			}
			.a1{
				color: white;
			}
			.a2{
				color: white;
				text-shadow: 0 0 3px red;
			}
			.a3{
				color: white;
				text-shadow: 0 0 25px red;
			}
			.a4{
				color: white;
				text-shadow: 0 0 40px #df00ff,0 0 10px white,0 0 10px white,0 0 10px white;
			}
			.a5{
				text-shadow: 0 0 3px white;
			}
			.a6{
				color: white;
				text-shadow: 0 0 5px black;
			}
			.a7{
				color: #ffb501;
				filter:blur(2px);
				text-shadow: 0 0 50px #ffb501;
			}
			.a8{
				color: #ffb501;
				filter:blur(0.3px);
				text-shadow: 0 0 5px white;
			}
			.fu2{
				width: 40%;
				background-color: #717171;
			}
			.fu2 .a2{
				text-shadow: 0 2px 2px white, 0 4px 2px #548d94, 0 6px 2px #004152;
			}
			.fu2 .a3{
				color: #004152;
				text-shadow: 0 -2px 2px #3b6171, 0 -4px 2px #d4d4d4, 0 -6px 2px #b7b7b7;
			}
			.fu2 .a4{
				color: #004152;
				text-shadow: 0 -2px 2px #55a9cb, 1px -2px 2px #d4d4d4, 4px 2px 2px #ffffff;
			}
		</style>
	</head>
	<body>
		<div class="fu">
			<h1 class="a1">TEXT SHADOW</h1>
			<h1 class="a2">描边文字</h1>
			<h1 class="a3">外发光</h1>
			<h1 class="a4">外发光</h1>
			<h1 class="a5">内投影</h1>
			<h1 class="a6">浮雕</h1>
			<h1 class="a7">模糊</h1>
			<h1 class="a8">模糊浮雕</h1>
		</div>
		<div class="fu2">
			<h1 class="a1">INSET EFFECT</h1>
			<h1 class="a2">立体字</h1>
			<h1 class="a3">立体字</h1>
			<h1 class="a4">VINTGE/RETRO</h1>
			<h1 class="a5">ANAGLYOPHIC</h1>
		</div>
	</body>
</html>